﻿<phone:PhoneApplicationPage
    x:Class="LightOMator.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:conding4fun="clr-namespace:Coding4Fun.Toolkit.Controls;assembly=Coding4Fun.Toolkit.Controls"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"    
    xmlns:cimbalino="clr-namespace:Cimbalino.Phone.Toolkit.Behaviors;assembly=Cimbalino.Phone.Toolkit"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:xamlconverter="clr-namespace:Enough.Converter;assembly=Enough.WP.XamlConverter"
    xmlns:localconverter="clr-namespace:LightOMator.Converter"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    DataContext="{Binding Main, Source={StaticResource Locator}}"
    >
    <phone:PhoneApplicationPage.Resources>
        <xamlconverter:CollectionSizeToBooleanConverter x:Name="CollectionSizeToBooleanConverter" />
        <xamlconverter:CollectionSizeToVisibilityConverter x:Name="CollectionSizeToVisibilityConverter" />
        <xamlconverter:DateAbbreviationConverter x:Name="DateAbbreviationConverter" />
        <localconverter:FadeCollectionToBrushConverter x:Name="FadeCollectionToBrushConverter" />
    </phone:PhoneApplicationPage.Resources>
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--Pivot Control-->
        <phone:Pivot Title="LIGHT-O-MATOR" SelectedIndex="{Binding PivotIndex, Mode=TwoWay}">
            <!-- set single color -->
            <phone:PivotItem Header="single">
                <Grid>
                    <conding4fun:ColorPicker Color="{Binding SingleColor, Mode=TwoWay}" />
                </Grid>
            </phone:PivotItem>

            <!--multiple colors - simple mode -->
            <phone:PivotItem Header="multiple">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <conding4fun:ColorPicker Color="{Binding MultipleColor, Mode=TwoWay}" Margin="10,5"/>
                    <ListBox ItemsSource="{Binding MultipleColors}" SelectedItem="{Binding SelectedMultipleColor, Mode=TwoWay}" SelectionMode="Single" MinHeight="44" Grid.Row="1" Margin="10,5">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Rectangle Width="40" Height="40" Margin="2">
                                    <Rectangle.Fill>
                                        <SolidColorBrush Color="{Binding}"/>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel/>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                    </ListBox>
                    <TextBlock Text="Fade in time" HorizontalAlignment="Center" Grid.Row="2" FontSize="20" Foreground="Gray" />
                    <Slider Orientation="Horizontal" Value="{Binding MultipleFadeInTimePromille, Mode=TwoWay}" Minimum="0" Maximum="1000" Grid.Row="2"/>
                    <TextBlock Text="Keep on time" HorizontalAlignment="Center" Grid.Row="3" FontSize="20" Foreground="Gray" />
                    <Slider Orientation="Horizontal" Value="{Binding MultipleKeepOnTimePromille, Mode=TwoWay}" Minimum="0" Maximum="1000" Grid.Row="3"/>
                </Grid>
            </phone:PivotItem>

            <!-- saved fade collections  -->
            <phone:PivotItem Header="saved">
                <Grid>
                    <TextBlock Text="You have not saved any fade collections yet." TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}" FontStyle="Italic"  Visibility="{Binding SavedCollections, Converter={StaticResource CollectionSizeToVisibilityConverter},ConverterParameter='reverse'}" Margin="10,5"/>
                    <ListBox ItemsSource="{Binding SavedCollections}" SelectedItem="{Binding SelectedSavedCollection, Mode=TwoWay}" SelectionMode="Single" Margin="10,5">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid Background="{Binding Converter={StaticResource FadeCollectionToBrushConverter}}" Margin="10,5">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="{Binding Name}" TextTrimming="WordEllipsis" Style="{StaticResource PhoneTextLargeStyle}" Foreground="White" VerticalAlignment="Bottom">
                                        <TextBlock.RenderTransform>
                                            <TranslateTransform X="2" Y="2" />
                                        </TextBlock.RenderTransform>
                                    </TextBlock>
                                    <TextBlock Text="{Binding Name}" TextTrimming="WordEllipsis" Style="{StaticResource PhoneTextLargeStyle}" Foreground="Black" VerticalAlignment="Bottom"/>
                                    <TextBlock Text="{Binding CreationTime, Converter={StaticResource DateAbbreviationConverter}}" VerticalAlignment="Bottom" Grid.Column="1" />
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                <Setter Property="VerticalContentAlignment" Value="Center"/>
                                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                                <Setter Property="VerticalAlignment" Value="Top"/>
                            </Style>
                        </ListBox.ItemContainerStyle>
                    </ListBox>
                </Grid>
            </phone:PivotItem>

        </phone:Pivot>
    </Grid>


    <!-- cimbalino application bar -->
    <i:Interaction.Behaviors>
        <cimbalino:ApplicationBarBehavior>
            <cimbalino:ApplicationBarIconButton Command="{Binding AddMultipleColorCommand, Mode=OneTime}" IconUri="/Assets/appbar_plus.png" Text="add" IsVisible="{Binding IsMultipleMode}"/>
            <cimbalino:ApplicationBarIconButton Command="{Binding RemoveMultipleColorCommand, Mode=OneTime}" IconUri="/Assets/appbar_minus.png" Text="remove" IsEnabled="{Binding MultipleColors,Converter={StaticResource CollectionSizeToBooleanConverter}}" IsVisible="{Binding IsMultipleMode}"/>
            <cimbalino:ApplicationBarIconButton Command="{Binding MultipleSaveFadesCommand, Mode=OneTime}" IconUri="/Assets/appbar_save.png" Text="save" IsEnabled="{Binding MultipleColors,Converter={StaticResource CollectionSizeToBooleanConverter},ConverterParameter='1'}" IsVisible="{Binding IsMultipleMode}"/>
            <cimbalino:ApplicationBarIconButton Command="{Binding EditFadesCommand, Mode=OneTime}" IconUri="/Assets/appbar_edit.png" Text="edit" IsEnabled="{Binding MultipleColors,Converter={StaticResource CollectionSizeToBooleanConverter},ConverterParameter='1'}" IsVisible="{Binding IsMultipleMode}"/>
            <cimbalino:ApplicationBarIconButton Command="{Binding EditFadesCommand, Mode=OneTime}" IconUri="/Assets/appbar_edit.png" Text="edit" IsEnabled="{Binding SelectedSavedCollection,Converter={StaticResource ValueNotNullToBooleanConverter}}" IsVisible="{Binding IsSavedMode}"/>
            <cimbalino:ApplicationBarIconButton Command="{Binding SettingsCommand, Mode=OneTime}" IconUri="/Assets/appbar.settings.png" Text="settings" />
        </cimbalino:ApplicationBarBehavior>
    </i:Interaction.Behaviors>

</phone:PhoneApplicationPage>